<template>
  <div>
    <n-data-table :bordered="false" :single-line="false" :data="tableData" :columns="columns" />
  </div>
</template>

<script setup lang="ts">
  import type { DataTableColumns } from 'naive-ui';

  interface SiteColumn {
    title: string;
    name: string;
  }

  function createColumns(): DataTableColumns<SiteColumn> {
    return [
      {
        title: 'Name',
        key: 'name',
      },
      {
        title: 'Age',
        key: 'type',
      },
      {
        title: 'Address',
        key: 'status',
      },
      {
        title: 'Tags',
        key: 'backup',
      },
      {
        title: 'Action',
        key: 'wwwroot',
      },
    ];
  }

  const columns = createColumns();

  const tableData = [
    {
      id: '',
      name: 'xiaopanglian.com',
      type: 0,
      status: 1,
      backup: 0,
      wwwroot: '/www/wwwroot/xiaopanglian.com',
      ssl: 1,
      description: 'default site',
    },
    {
      id: '',
      name: 'qq.com',
      type: 1,
      status: 0,
      backup: 0,
      wwwroot: '/www/wwwroot/qq.com',
      ssl: 0,
      description: 'default site',
    },
    {
      id: '',
      name: 'baidu.com',
      type: 2,
      status: 1,
      backup: 0,
      wwwroot: '/www/wwwroot/baidu.com',
      ssl: 1,
      description: 'default site',
    },
    {
      id: '',
      name: 'www.music.com',
      type: 3,
      status: 2,
      backup: 6,
      wwwroot: '/www/wwwroot/www.music.com',
      ssl: 0,
      description: 'default site',
    },
  ];
</script>
